<template>
  <view class="container">
    <sc-navbar back title="上传素材"></sc-navbar>
    <glo-gutter>
      <glo-chunk>
        <sc-flex ai="center" col-gap="15">
          <glo-title title="特写素材"></glo-title>
          <sc-text color="#1677FF" size="15" text="查看示例" @click="handleShowExample"></sc-text>
        </sc-flex>
        <sc-text text="上传骨钉层&骨板(棒)图片确保清晰,确保清晰，信息完整，最多上传9张" size="19" color="#767676"></sc-text>
        <sc-view mt="10">
          <glo-upload :maxCount="9"></glo-upload>
        </sc-view>
      </glo-chunk>
      <glo-chunk>
        <sc-flex ai="center" col-gap="15">
          <glo-title title="普通素材"></glo-title>
          <sc-text color="#1677FF" size="15" text="查看示例" @click="handleShowExample"></sc-text>
        </sc-flex>
        <sc-text text="上传骨钉层&骨板(棒)图片确保清晰,确保清晰，信息完整，最多上传9张" size="19" color="#767676"></sc-text>
        <sc-view mt="10">
          <glo-upload :maxCount="9"></glo-upload>
        </sc-view>
      </glo-chunk>
    </glo-gutter>
    <sc-footer height="150" col-gap="45">
      <sc-button type="grey-red" width="262" height="75" text="删除"></sc-button>
      <sc-button type="primary" width="262" height="75" text="批量上传"></sc-button>
    </sc-footer>
    <up-popup v-model:show="showExamplePopup" mode="bottom" round="0">
      <view class="example-popup-content">
        <sc-flex ai="center" col-gap="23">
          <sc-image src="/static/imgs/example1.png" width="150" height="150"></sc-image>
          <sc-flex direction="t" row-gap="15">
            <glo-title title="正确示范"></glo-title>
            <sc-view width="433">
              <sc-text text="上传四角完整、亮度均匀、照片清晰的素材能极大提高识别通过率~" size="26" color="#767676"></sc-text>
            </sc-view>
          </sc-flex>
        </sc-flex>
        <sc-flex ai="center" col-gap="75" mt="35">
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
        </sc-flex>
      </view>
    </up-popup>
  </view>
</template>
<script setup>
const showExamplePopup = ref(false);
const handleShowExample = () => {
  console.log('🚀 111111',)
  showExamplePopup.value = true;
}
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.example-popup-content {
  padding: 37rpx 50rpx 32rpx;

}
</style>
